<!-- 订单管理-已完成订单 --><!-- 订单管理-已完成订单 -->
<template>
    <div>
        <el-card style="max-width: 100%;">
            <search-box :tableDataInput="expandedNodesData" :searchField="'orderId'"
                @search="handleSearch"></search-box>
            <el-table :data="selectedItems" style="margin-top: 16px;" :header-cell-style="{ background: '#EBEEF2' }"
                row-key="id" default-expand-all>
                <el-table-column prop="id" min-width="150" label="订单编号" />
                <el-table-column label="商品信息" width="150">
                    <template slot-scope="scope">
                        <el-tree :data="scope.row.sortTree" :props="defaultProps" node-key="label"
                            @node-expand="open(scope.$index, scope.row)"
                            @node-collapse="close(scope.$index, scope.row)">
                            <template v-slot="{ node, data }"> <!-- 使用 v-slot 而不是 slot-scope -->
                                <div class="tree-node-note" :class="{
                                    'parent-node': !node.isLeaf,
                                    'child-node': node.isLeaf
                                }">
                                    <div>
                                        <img v-if="!node.isLeaf" :src="node.expanded ? collapsedIcon : expandedIcon"
                                            class="fa-folder" />
                                        {{ node.label }}
                                    </div>
                                    <p style=" font-size: 10px; margin-left: 5px; color: rgba(167, 180, 204, 1);">{{
                                        data.note }}</p>
                                </div>
                            </template>
                        </el-tree>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" width="150" align="center">
                    <template slot-scope="scope">
                        <div class="li_div">
                            {{ scope.row.createTime }}
                        </div>
                        <div v-if="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note li_div" v-for="(item, index) in scope.row.countList"
                                :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderAmount" label="订单金额" align="center">
                    <template slot-scope="scope">
                        <div class="tree-node-note-center">
                            ¥{{ scope.row.orderAmount }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note-center" v-for="(item, index) in scope.row.countList"
                                :key="index">
                                ¥{{ item }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="完成时间" align="center" width="150">
                    <template slot-scope="scope">
                        <div class="li_div">
                            {{ scope.row.receiverTime }}
                        </div>
                        <div v-if="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note li_div" v-for="(item, index) in scope.row.countList"
                                :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="rate" label="综合评价" align="center" width="160">
                    <template slot-scope="scope">
                        <div class="li_div">
                            <!-- {{ scope.row.createTime }} -->
                        </div>
                        <div v-if="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note li_div" v-for="(item, index) in scope.row.countList"
                                :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="receiverName" label="收货人名称" align="center">
                    <template slot-scope="scope">
                        <div class="tree-node-note-center">
                            {{ scope.row.receiverName }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note-center" v-for="(item, index) in scope.row.countList"
                                :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="收货地址">
                    <template slot-scope="scope">
                        <div class="tree-node-note">
                            {{ scope.row.receiverDetailAddress }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="receiverPhone" align="center" label="联系电话" min-width="120">
                    <template slot-scope="scope">
                        <div class=" tree-node-note">
                            {{ scope.row.receiverPhone }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
                        <div class="con_div" @click="showOrderDetails(scope.row)">
                            <img class="con_div_img" src="../../assets/order/订单.png" alt="订单图标" />
                            <span class="con_div_span">订单详情</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <CustomDialog :dialogVisible.sync="dialogVisible" :orderData="currentRowData" />
            <ChatFloatingBubble />

        </el-card>
        <el-pagination background layout="->,prev, pager,next,total" :page-size="10" :total="tableDataLength"
            @current-change="handleCurrentChange" style="margin-top: 20px;">
        </el-pagination>
    </div>

</template>

<script>
import CustomRate from './components/OrderRate.vue';
import ChatFloatingBubble from '../../components/ChatFloatingBubble.vue';
import CustomDialog from './components/CompletedOrderDetail.vue';
import { getAllOrders } from '@/api/api';

export default {
    data() {
        return {
            selectedItems: [],
            dialogVisible: false,
            currentRowData: null, // 用于存储当前行的数据  
            expandedIcon: require("@/assets/order/加.png"),
            collapsedIcon: require("@/assets/order/减.png"),
            expandedNodesData: [], // 用于存储展开的树节点详细信息 
            tableDataLength: 0,
            detailData: {
                "shopId": sessionStorage.getItem('shopid'),
                "pageNo": 1,
                "orderStatus": 4,
                "pageSize": 4
            },
            input3: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },

        }
    },
    async created() {
        this.selectedItems = this.expandedNodesData; // 初始显示所有商品
        await this.getCompletedData(this.detailData);
    },
    methods: {
        //将数据转换成树形结构
        getdatatransfortree(data) {
            for (let i = 0; i < data.length; i++) {
                const sortTree = [
                    {
                        label: data[i].orderTitle,
                        children: [],
                    },
                ];

                this.$set(data[i], "nodeStatus", "father");
                const countList = [];
                data[i].listProductOrderInfos.forEach((info) => {
                    // 解析 spData JSON 字符串
                    const spDataParsed = JSON.parse(info.spData);
                    const note = spDataParsed.find((item) => item.value)
                        ? spDataParsed.find((item) => item.value).value
                        : ""; // 查找第一个非空 value

                    countList.push(info.commodityPrice);

                    // 添加到 children 数组
                    sortTree[0].children.push({
                        label: info.commodityName,
                        payNumber: info.payNumber,
                        note: note, // 如果 note 为空，则不会添加到子对象中
                    });
                });

                // 返回构建好的 sortTree
                data[i].sortTree = sortTree;
                data[i].countList = countList;
            }
            return data;
        },
        async getCompletedData(data) {
            try {
                const res = await getAllOrders(data);
                if (res.data.code == 200) {
                    this.selectedItems = res.data.result.records;
                    this.getdatatransfortree(this.selectedItems);
                    this.tableData = res.data.result.records;
                    this.tableDataLength = res.data.result.total;
                }
            } catch (error) {
                console.log(error);
            }
        },
        handleSearch(filtered) {
            this.selectedItems = filtered;
        },
        open(index, row) { 
            console.log("节点打开");
            row.nodeStatus = 'child'
        },
        close(index, row) {  
            console.log("节点关闭");
            row.nodeStatus = 'father'
        },
        showOrderDetails(row) {
            this.dialogVisible = true; // 显示弹窗  
            this.currentRowData = row; // 更新当前行的数据到父组件的 data 中  
        },
        handleCurrentChange(val) {
            this.detailData.pageNo = val;
            this.getCompletedData(this.detailData);
        },
    },
    components: {
        // 注册 custom-rate 组件  
        CustomRate: CustomRate,
        CustomDialog: CustomDialog,
        ChatFloatingBubble: ChatFloatingBubble
    },
}
</script>

<style scoped>
.input1 {
    font-size: 16px;
    width: 241px;
    opacity: 1;
    border-radius: 80px;
    background: rgb(153, 155, 158);
}

ul {
    /* 确保 ul 没有 padding-left，这样 li 就能与其左边界对齐 */
    padding-left: 0;
}
.con_div_span {
    /* display: inline-block; */
    font-size: 14px;
    margin: 0;
}

.children_div {
    margin-top: 50px
}

.tree-node-note {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    /* 默认对齐方式，与 label 对齐 */
    justify-content: center;
    /* 垂直居中子元素 */
    color: rgba(52, 69, 99, 1);
    font-size: 14px;
    height: 35px;
    /* border: 1px solid black; */
    line-height: 15.6px;
    /* margin-left: 20px; */
}

.tree-node-note-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 默认对齐方式，与 label 对齐 */
    justify-content: center;
    /* 垂直居中子元素 */
    color: rgba(52, 69, 99, 1);
    font-size: 14px;
    height: 35px;
    line-height: 15.6px;
}

.tree-node-note.parent-node {
    /* margin-left: 30px; */
    width: 100%;
    /* background-color: aqua; */
    margin-left: 0;

}

.tree-node-note.child-node {
    /* margin-left: 30px; */
    width: 100%;
    /* background-color: aqua; */
    margin-left: 10px;
}

.tree-node-note .fa-folder {
    /* 与文本之间添加一些间距 */
    /* 其他图标样式 */
    width: 10px;
    height: 10px;
}

/* 假设你有一个类名来标识需要修改图标的父节点 */
::v-deep .el-tree .el-tree-node__expand-icon {
    /* 隐藏默认的图标 */
    display: none;
}

.con_div{
    /* background-color: bisque; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.con_div_img {
    width: 11.67px;
    height: 13.33px;
    vertical-align: middle;
    margin-right: 5px;
    /* 可以让图片与文本垂直居中 */
}

.con_div_span {
    /* 调整间距，使文本与图片之间有一定的距离 */
    font-size: 12px;
    vertical-align: middle;
    /* 与图片垂直对齐 */
    display: inline-block;
    /* 确保span是内联块元素 */
}

.li_div {
    display: flex;
    flex-direction: column;
    /* width: 150px; */
    align-items: center;
    /* padding-top: 40px; */
    justify-content: center;
    /* 默认对齐方式，与 label 对齐 */
    font-size: 14px;  
}

/* tree节点高度 */
.el-table td.el-table__cell div>>>.el-tree-node__content {
    height: 35px;
    width: 100%;
}

.custom-tree-node {
    display: flex;
    align-items: center;
}

.input1>>>input.el-input__inner {
    background: rgba(235, 238, 242, 1);
    border-radius: 20px;
}
</style>